<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
    ></script>
    <!-- 初始化地图 -->
    <script src="../js/initMap.js"></script>
    <!-- 城市 -->
    <script src="./city.js"></script>
    <!-- 主题 -->
    <script src="../js/theme.js"></script>
    <!-- 通过城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <!-- 基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <!-- 飞线动画 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
    <title>飞线图</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
  </body>
</html>
<script type="text/javascript">
  // 获取坐标点 - lng: 121.487899, lat: 31.249162
  const cityCenter = mapv.utilCityCenter.getCenterByCityName("重庆");
  // 初始化 map
  const map = initMap({
    tilt: 30, // 倾斜
    heading: 0, // 旋转
    center: [cityCenter.lng, cityCenter.lat], // 坐标
    zoom: 6, // 放大比例
    style: purpleStyle, // 主题
  });

  // 准备数据源 - 散点必须满足以下格式
  const initData = () => {
    const data = [];
    // 1.实例化贝塞尔曲线
    const curve = new mapvgl.BezierCurve();
    let randomCount = 100; // 模拟的飞线的数量
    while (randomCount--) {
      // 2.设置起点和终点
      const startPoint = mapv.utilCityCenter.getCenterByCityName(
        citys[parseInt(Math.random() * citys.length)]
      );
      const endPoint = mapv.utilCityCenter.getCenterByCityName(
        citys[parseInt(Math.random() * citys.length)]
      );
      curve.setOptions({
        start: [startPoint.lng, startPoint.lat],
        end: [endPoint.lng, endPoint.lat],
      });
      // 生成贝塞尔曲线坐标集
      const curveData = curve.getPoints();
      data.push({
        geometry: {
          type: "LineString",
          coordinates: curveData,
        },
        properties: {
          count: Math.random(),
        },
      });
    }
    console.log("data", data);
    return data;
  };

  // 绘制数据源
  const setData = (data) => {
    // 1.初始化图层
    const view = new mapvgl.View({ map });
    // 2.初始化飞线对象
    const flyLine = new mapvgl.FlyLineLayer({
      style: "chaos", // 随机移动 默认normal
      step: 0.1, // 飞线动画速度
      color: "rgba(33, 242, 214, 0.3)", // 坐标连接线条线色
      // 飞线线条颜色
      textureColor: function (data) {
        return "#ff0000";
        // return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd'
      },
      textureWidth: 10, // 飞线的宽度
      textureLength: 50, // 飞线动画长度~占整条线的百分比 0-100
    });
    // 3.飞线对象添加图层
    view.addLayer(flyLine);
    // 4.绑定数据
    flyLine.setData(data);
  };
  const data = initData();
  setData(data);
</script>
